import * as React from "react";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Typography from "@material-ui/core/Typography";
import CardActionArea from "@material-ui/core/CardActionArea";
import moment from 'moment';
import {BaseProps} from "../../../App";
import {ServiceApi} from "../../../framework/api/ServiceApi";

interface ClusterListState {
    clusters: Array<any>;
    loading: boolean;
    progressValue: number;
}

export class ClusterList extends React.Component<BaseProps, ClusterListState> {
    constructor(props: BaseProps) {
        super(props);
        this.state = {
            loading: true,
            progressValue: 0,
            clusters: []
        }
    }

    componentDidMount(): void {
        // 查询集群列表
        ServiceApi.clusterList().then(res => {
            this.setState({
                clusters: res.data.result.content
            })
        }).catch(e => console.log(e)).then(() => {
            this.setState({
                loading: false,
                progressValue: 100,
            })
        });
    }

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <div>
            <div className={'main-content'}>
                {this.state.clusters.map((cluster, index) => (<div key={index}>
                    <Card variant={"outlined"}>
                        <CardActionArea onClick={() => this.props.history.push('/cluster/' + cluster.id)}>
                            <CardContent>
                                <Typography gutterBottom variant="h5" component="h2">
                                    {cluster.name}
                                </Typography>
                                <Typography variant="body2" color="textSecondary" component="p">
                                    {cluster.description}
                                </Typography>
                                <Typography variant="body2" color="textSecondary" component="p">
                                    创建人：{cluster.authorId}
                                </Typography>
                                <Typography variant="body2" color="textSecondary" component="p">
                                    创建时间：{moment(cluster.createdOn).format('YYYY-MM-DD')}
                                </Typography>
                                <Typography variant="body2" color="textSecondary" component="p">
                                    类型：{cluster.type}
                                </Typography>
                            </CardContent>
                        </CardActionArea>
                    </Card>
                </div>))}
            </div>
        </div>;
    }
}
